<template>
	<view>
		<view class="realBox">
			<u-upload
			 :custom-btn="true"
			 :action="action" :file-list="fileList" >
			 <view slot="addBtn"  hover-class="slot-btn__hover" hover-stay-time="150">
			 	<image class="img" src="../../static/zheng.png" mode=""></image>
				
			 	</view>
			 </u-upload>
			 <view style="height: 40rpx;"></view>
			 <u-upload
			  :custom-btn="true"
			  :action="action" :file-list="fileList" >
			  <view slot="addBtn"  hover-class="slot-btn__hover" hover-stay-time="150">
			  	<image class="img" src="../../static/fan.png" mode=""></image>
			  	</view>
			  </u-upload>
			  <view class="form">
				  
			  	<view class="mt30">
			  		<view class="aic jcb">
						<view class="aic">
							手机号
								<u-input class="mx15" v-model="value" placeholder="输入手机号" />
						</view>
			  			<view class="llt-main-color" @tap="getCode">
			  				{{tips}}
			  			</view>
			  	
			  	
			  		</view>
			  		<u-line color="#919599"></u-line>
			  	</view>
			  	<view class="mt30">
					<view class="aic">
						验证码
							<u-input class="mx15" v-model="value" placeholder="输入短信验证码" />
					</view>
			  		<u-line color="#919599"></u-line>
			  	</view>
				<view class="mt30">
					<view class="aic">
						姓名
							<u-input class="mx15" v-model="value" placeholder="输入姓名" />
					</view>
					<u-line color="#919599"></u-line>
				</view>
				<view class="mt30">
					<view class="aic">
						身份证号
							<u-input class="mx15" v-model="value" placeholder="输入身份证号" />
					</view>
					<u-line color="#919599"></u-line>
				</view>
			  	<view class="mt30">
			  		<view class="aic">
			  			身份证地址
			  				<u-input class="mx15" v-model="value" placeholder="输入身份证地址" />
			  		</view>
			  		<u-line color="#919599"></u-line>
			  	</view>
				<view class="mt30">
					<view class="aic" style="line-height: 2rem;"  @tap="handleShow">
						身份证有效期
							<view class="mx15" style="color: #D3D6DC;">
								请选择时间范围
							</view>
					</view>
					<u-line color="#919599"></u-line>
				</view>
			  	<view class="btn">
			  		<u-button type="primary"  :custom-style="customStyle">
			  			提交
			  		</u-button>
			  	</view>
			  </view>
		</view>
	<u-calendar v-model="show" :mode="mode" @change="changeDate"></u-calendar>
		<u-verification-code startText="获取验证码" 
		:seconds="seconds"
		 @end="end" @start="start" ref="uCode"
			@change="codeChange"></u-verification-code>
	</view>
</template>

<script>
	export default {
		name:"setRealName",
		data() {
			return {
				mode:"range",
				show:false,
				tips: '获取验证码',
				seconds: 60,
				phone: ""
			};
		},
		methods: {
			/**
			 * 选择日期
			 */
			handleShow(){
				this.show=true
				console.log(this.show);
			},
			/**
			 * 返回日期
			 */
			changeDate(e){
				console.log(e);
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						this.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			end() {
				this.$u.toast('倒计时结束');
			},
			start() {
				this.$u.toast('倒计时开始');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.form{
		width: 650rpx;
		.btn{
			margin-top: 50rpx;
			margin-bottom: 30rpx;
		}
	}
	.img{
		width: 550rpx;
		height: 300rpx;
	}
	.slot-btn__hover {
		background-color: rgb(235, 236, 238);
	}
.realBox{
	width: 750rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	// background: rgb(244, 245, 246);
	border-radius: 10rpx;
}
</style>
